import React from 'react';
import { View, ScrollView, TouchableHighlight, Text } from 'react-native';

import styles from './style';

function FinancialStateScreen() {
  const financialStateList = [
    {
      url: '',
      title: '收支汇总',
      subTit: '根据时间段、汇款方式汇总',
      interTxt: '前往',
    },
    {
      url: '',
      title: '收支明细',
      subTit: '订单应收款汇总',
      interTxt: '进入',
    },
    {
      url: '',
      title: '应付款',
      subTit: '供应商应付款与占比',
      interTxt: '查看',
    },
    {
      url: '',
      title: '应收款',
      subTit: '客户应付款比例',
      interTxt: '进入',
    },
    {
      url: '',
      title: '其它收支',
      subTit: '其它收支明细',
      interTxt: '查看',
    },
  ];

  const styleHandle = index => {
    let tempStyle = '';

    switch (index) {
      case 1:
        tempStyle = styles.fsItem_2;
        break;

      case 2:
        tempStyle = styles.fsItem_3;
        break;

      case 3:
        tempStyle = styles.fsItem_4;
        break;

      case 4:
        tempStyle = styles.fsItem_5;
        break;

      default:
        tempStyle = styles.fsItem_1;
    }

    return tempStyle;
  };

  return (
    <ScrollView style={styles.financialStateContainer}>
      <View style={styles.financialStateWrapper}>
        {financialStateList.map((item, index) => {
          const cusStyle = styleHandle(index);

          return (
            <View style={[styles.fsItem, cusStyle]} key={index}>
              <View style={styles.fsItemItemLeft}>
                <Text style={styles.fsItemLeftTit}>{item.title}</Text>
                <Text style={styles.fsItemLeftSubTit}>{item.subTit}</Text>
              </View>
              <View style={styles.fsItemItemRight}>
                <View style={styles.fsItemRightVLine} />
                <Text style={styles.fsItemRightInterTxt}>{item.interTxt}</Text>
              </View>
            </View>
          );
        })}
      </View>
    </ScrollView>
  );
}

export default FinancialStateScreen;
